<template>
    <div id="filler" >
        <div class="con">
            <div class="cricle">
            </div>
            <span id="text">99.9%</span>
        </div>
        <div id="dot">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"

</script>
<style scoped>
#filler {
    --bacolor: aqua;
    height: 100vh;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    filter: contrast(200%);
}

.cricle {
    width: 200px;
    height: 200px;
    border-top-left-radius: 80%;
    border-bottom-left-radius: 90%;
    border-bottom-right-radius: 70%;
    border-top-right-radius: 60%;
    background-color: var(--bacolor);
    filter: blur(5px);
    animation: fill 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fill {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.con {
    position: relative;
}

#text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    color: aliceblue;
    font-size: 18px;
}

#dot {
    height: 200px;
    width: 200px;
    line-height: 200px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: var(--bacolor);
    animation: dot 3s linear infinite;
    display: inline-block;
}

@keyframes dot {
    0% {
        transform: translateY(-10%);
    }

    25% {
        transform: translateY(-20%);
    }

    75% {
        transform: translateY(-70%);

    }

    100% {
        transform: translateY(-100%);

    }
}
</style>